<template>
    <div class="orderDetailStatus page-pad-pk text-white-pk " :style="detailStyle">
        <div class="orderStatus">
            <div class="font-size-15-pk">
                {{orderStatusFmt(status)}}
            </div>
            <div class="font-size-13-pk"></div>
        </div>
        <div class="">
            <div class="orderWaitPay">
                <img :src="require(`@img/${statusImg}`)" class="orderStatusImg">
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'orderDetailStatus',
        props:{
            status:{
                type: String,
                required: true
            },
            orderId:{
                type:String,
                required: true
            },
            //背景颜色
            background: {
                type: String,
                default: "#D82D11"
            },
        },
        components: {
        },

        data() {
            return {
                statusImg:"orderWaitPay.png",
            }
        },
        created() {
        },
        computed: {
            detailStyle() {
                return {
                    background: this.background,
                }
            }
        },
        watch: {
            status: {
                handler(){
                    this.toggleImg()
                },
                immediate: true
            }
        },
        methods: {
            /*普通商品订单
           * 状态订单：0未付款，1已付款未发货，2取消订单,
           * 3，已发货，4，确认收货，6已退款，
           * 7已申请退货，8已退货，10交易成功
           */
            orderStatusFmt() {
                let statusArr = [
                    {value: "0", name: "等待买家付款"},
                    {value: "1", name: "买家已付款"},
                    {value: "2", name: "交易关闭"},
                    {value: "3", name: "已发货"},
                    {value: "4", name: "交易完成"},
                    {value: "6", name: "交易关闭"},
                    {value: "8", name: "交易关闭"},
                    {value: "10", name: "交易完成"},
                ];
                return  this.$util.dictTranslate(statusArr,this.status)
            },
            toggleImg() {
                switch (this.status) {
                    case "0":
                        this.statusImg = "orderWaitPay.png";
                        break;
                    case "1":
                        this.statusImg = "orderWaitDeliver.png";
                        break;
                    case "2":
                    case "6":
                    case "8":
                    case "10":
                        this.statusImg = "orderClose.png";
                        break;
                    case "3":
                        this.statusImg = "orderWaitGet.png";
                        break;
                    case "4":
                        this.statusImg = "orderSucess.png";
                        break;
                    default:
                        this.statusImg = "orderWaitPay.png";
                }
            }

        }
    }
</script>

<style lang="scss" scoped>
    .orderDetailStatus {
        display: flex;
        line-height: 20px;
        align-items: center;
        position: relative;
        top: 0;
        z-index: 1;
        padding-top: 15px;
        padding-bottom: 5px;

        .orderStatus {
            line-height: 1.8;
            flex-grow: 1;
            padding-right: 20px;
        }
        .orderStatusImg{
            width: 95px;
            height: 96px;
        }
        .waitDeliverImg{
            width: 106px;
            height: 90px;
        }
        .orderWaitPay{
            padding-top: 35px;
        }
        .orderWaitDeliver{
            padding-top: 50px;
        }
        .orderWaitGet{
            padding-top: 35px;
        }
        .orderWaitImg{
            width: 120px;
            height: 110px;
        }
        .orderClose{
            padding: 25px 5px 15px;
        }

    }
</style>
